<template>
  <div>
    <el-row style="height: 840px;">
      <el-tooltip effect="dark" placement="right"
                  v-for="item in books"
                  :key="item.id">
        <p slot="content" style="font-size: 14px;margin-bottom: 6px;">{{item.title}}</p>
        <p slot="content" style="font-size: 13px;margin-bottom: 6px">
          <span>{{item.author}}</span> /
          <span>{{item.date}}</span> /
          <span>{{item.press}}</span>
        </p>
        <p slot="content" style="width: 300px" class="abstract">{{item.abs}}</p>
        <el-card style="width: 135px;margin-bottom: 20px;height: 233px;float: left;margin-right: 15px" class="book"
                 bodyStyle="padding:10px" shadow="hover">
          <div class="cover">
            <img :src="item.cover" alt="封面">
          </div>
          <div class="info">
            <div class="title">
              <a href="">{{item.title}}</a>
            </div>
          </div>
          <div class="author">{{item.author}}</div>
        </el-card>
      </el-tooltip>
    </el-row>
    <el-row>
      <el-pagination
        :current-page="1"
        :page-size="10"
        :total="20">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'Books',
    data () {
      return {
        books: [
          {
            cover: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Ftfscom%2Fi4%2F750751837%2FTB2aUBpXz7jyKJjy1XaXXblnFXa_%21%21750751837.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627004058&t=e5891aa5385682763fc6b2322eee6618',
            title: '红楼梦',
            author: '曹雪芹',
            date: '1300-10-13',
            press: '重庆出版社',
            abs: '这是一本非常好看的书，嗯，很好看的啊啊啊啊啊啊啊啊啊'
          },
          {
            cover: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.kfzimg.com%2FG06%2FM00%2F6F%2F41%2Fp4YBAFuCof6AUomHAAHqPumk2gQ905_b.jpg&refer=http%3A%2F%2Fwww.kfzimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642495938&t=34bf1ff9e9f7c09d12f15aae3a7c2873',
            title: '西游记',
            author: '吴承恩',
            date: '1900-10-13',
            press: 'www出版社',
            abs: '这是一本非常好看的书，嗯，很好看的啊啊啊啊啊啊啊啊啊'
          },
          {
            cover: 'https://img1.baidu.com/it/u=337713132,1007875187&fm=26&fmt=auto',
            title: '皮皮鲁冒险记',
            author: '郑渊洁',
            date: '2007-10-13',
            press: '清华出版社',
            abs: '这是一本非常好看的书，嗯，很好看的啊啊啊啊啊啊啊啊啊'
          }
        ]
      }
    }
  }
</script>

<style scoped>
  .cover {
    width: 115px;
    height: 172px;
    margin-bottom: 7px;
    overflow: hidden;
    cursor: pointer;
  }

  img {
    width: 115px;
    height: 172px;
    /*margin: 0 auto;*/
  }

  .title {
    font-size: 14px;
    text-align: left;
  }

  .author {
    color: #333;
    width: 102px;
    font-size: 13px;
    margin-bottom: 6px;
    text-align: left;
  }

  .abstract {
    display: block;
    line-height: 17px;
  }

  a {
    text-decoration: none;
  }

  a:link, a:visited, a:focus {
    color: #3377aa;
  }
</style>